<template>
  <div>
    <van-search
      shape="round"
      placeholder="请输入搜索关键词"
      @input="inputFn"
      v-model="value"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="list.length == 0">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(item, index) in searchList"
          :key="index"
          @click="btnFn(item.first)"
          >{{ item.first }}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <SongItem
          v-for="item in list"
          :key="item.id"
          :name="item.name"
          :author="item.ar[0].name"
          :id="item.id"
        >
        </SongItem>
      </van-list>
    </div>
  </div>
</template>
<script>
import { searchHostListApi, cloudSearchListApi } from "@/api";
import SongItem from "@/comments/SongItem.vue";
export default {
  data() {
    return {
      searchList: [],
      list: [],
      value: "",
      loading: false,
      finished: false,
      limit: 20,
      page: 1,
      timer: null,
    };
  },
  components: { SongItem },
  //   在mounted中调用一下请求
  async mounted() {
    this.getsearchHostList();
    // this.getcloudSearchList();
  },
  methods: {
    async getsearchHostList() {
      try {
        const res = await searchHostListApi();
        console.log(res);
        this.searchList = res.data.result.hots;
      } catch (e) {
        console.log(e);
      }
    },
    async getcloudSearchList() {
      try {
        const res = await cloudSearchListApi({
          keywords: this.value,
          limit: this.limit,
          offset: (this.page - 1) * this.limit,
        });
        console.log(res);
        return res.data.result;
      } catch (e) {
        console.log(e);
      }
    },

    async inputFn() {
      // 设置防抖
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        this.page = 1;
        this.finished = false;
        if (this.value.trim() == "") {
          return (this.list = []);
        }
        const res = await this.getcloudSearchList();
        this.list = (res && res.songs) || [];
      }, 1000);
    },
    // 热门搜索点击按钮事件
    async btnFn(val) {
      this.value = val;
      this.page = 1;
      this.finished = false;
      const res = await this.getcloudSearchList();
      this.list = (res && res.songs) || [];
    },
    // 加载更多
    async onLoad() {
      this.page++;
      const res = await this.getcloudSearchList();
      if (!res.songs || res.songCount <= (this.page - 1) * this.limit) {
        this.finished = true;
        this.loading = false;
        return;
      }
      this.list = [...this.list, ...(res.songs || [])];
      this.loading = false;
    },
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>
